const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPulgin = require("html-webpack-plugin");

module.exports = {
	mode: "development",
	entry: "./src/main.ts",
	output: {
		filename: "bundle.js",
		path: path.resolve(process.cwd(), "./dist")
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				exclude: /node_modules/,
				use: [
					{
						loader: "vue-loader"
					}
				]
			},
			{
				test: /\.ts$/,
				exclude: /node_modules/,
				use: [
					{
						loader: "ts-loader",
						options: {
							appendTsSuffixTo: [/\.vue$/]
						}
					}
				]
			},
			{
				test: /\.css$/,
				use: [
					"vue-style-loader",
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							plugins: [require("autoprefixer")()]
						}
					}
				]
			},
			{
				test: /\.less$/,
				use: [
					"vue-style-loader",
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							plugins: [require("autoprefixer")()]
						}
					},
					"less-loader"
				]
			},
			{
				test: /\.(eot|woff2?|ttf|svg)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							name: "[name]-[hash:5].min.[ext]",
							limit: 5000
						}
					}
				]
			},
			{
				test: /\.(jpg|png|gif|jpeg)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							limit: 10000
						}
					}
				]
			}
		]
	},

	plugins: [
		new VueLoaderPlugin(),
		new HtmlWebpackPulgin({
			isDev: true,
			filename: "index.html",
			template: path.resolve(process.cwd(), "public/index.html"),
			inject: "body",
			hash: true
		})
	],
	resolve: {
		alias: {
			"@": path.resolve(process.cwd(), "src")
		},
		extensions: [".js", ".vue", ".ts"]
	},

	devServer: {
		contentBase: path.resolve(process.cwd(), "./public"),
		port: 8000,
		historyApiFallback: true,
		overlay: true
	}
};
